<template>
  <div class="pagestyle">
    <list_controller :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }" ref="zujianname"
      :options="state.optionsList" :showCaozuo="true">
      <template v-slot:selectNamelist>
        网络设备
      </template>
      <template v-slot:listSS="{ row, field }">
        <div v-if="field == 'sensorName'">
          {{ row.sensorName }}
          </div>
            <div v-if="field == 'status'">
          {{ row.status }}
          </div>
      </template>
      <template v-slot:listSSfilter="{ row, field }">
        <div v-if="field == 'sensorName'">
          <el-cascader style="margin: 10px;" clearable :teleported="false" v-model="state.shaixuanObj.condition"
            @change="elcascaderChange" :options="state.searchTreeList" :props="{
                        children: 'children',
                        value: 'name',
                        label: 'commonField',
                        emitPath: false,
                        checkStrictly: true,
                      }" />
        </div>
           <div v-if="field == 'status'">
          <el-checkbox-group v-model="state.statusListquery"
            style="display: flex;flex-direction: column;padding: 0 10px;">
            <el-checkbox v-for="city in ['正常',  '分站故障' ,  '初始化',
              '网络故障',  '重启',  '线路质量评估']" :key="city" :label="city" :value="city" 
              @change="statuscheckboxChange">
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </template>
    </list_controller>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title" style="color:#3E464F;margin:0;">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>态势分析</span></h4>
      </template>
      <div>
        <realChartCom :targetTime="state.targetTime" :pointDataList="state.pointDataList" :drawerShow="state.drawerShow"
          :nomoreType="1" :grandType="2"></realChartCom>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import realChartCom from "./listCom/realChartCom.vue";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import dayjs from "dayjs";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let state = reactive({
     statusListquery:['正常',  '分站故障' ,  '初始化',
              '网络故障',  '重启',  '线路质量评估'],
    tabNameData: "模拟量",
    detailsShow: false,
    detailsList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    optionsList: {},
    options: {
      refreshShow: true,
      tableheads: computed(() => table_headers.callNetworkDevice),
      listSS: [{
        field: "sensorName",
        filterField: {
          field: "sensorName",
          filterdiy: true, //自定义筛选表头
          options:[{}]
        },
      },{
          field: "status",
          filterField: {
            field: "status",
            filterdiy: true, //自定义筛选表头
            options: []
          },
        }],
      flag: "A",
      queryList: {
        querys: [],
      },
      dataUrl: "/station/attainNetDevice",
    },
    // 表单
    editId: undefined,
    drawerShow: false,
    pointDataList: [],
    targetTime: '',
    conditionsensorName: 'A',
    searchTreeList: [],
    shaixuanObj: {
      condition: "A",
      flag: "B",
      isPower: false
    }

  });
  
  function statuscheckboxChange(e) {
    proxy.$refs.zujianname.getData({
      statusList: state.statusListquery
    })
  }

  // 填写分析抽屉
  function getlistPointName() {
    axios
      .post("/hisPointFeed/listPointName", {
        condition: state.conditionsensorName,
      })
      .then((res) => {
        state.searchTreeList = res.data;
      });
  }
  getlistPointName()


  state.optionsList = state.options;


  function elcascaderChange(val) {
    setTimeout(() => {
      proxy.$refs["zujianname"].getData({
        pageNum: 1,
        pageSize: 10,
        flag: state.conditionsensorName,
        condition: state.shaixuanObj.condition,
        isPower: false
      });
    }, 200);
  }

  // 跳转历史预报警异常页面
  const goPage = () => {
    router.push({
      name: 'Cx_hisYBAlarmList'
    })
  }
</script>
<style lang="scss" scoped>
  :deep(.vxe-table--filter-footer) {
    display: none !important;

  }

  .xiazai {
    position: absolute;
    top: 42px;
    right: 241px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  .pagestyle {
    display: flex;
    justify-content: space-between;
  }
</style>